<template>
    <div class="taobao-ad-container"
         v-loading="loading">
        <el-carousel indicator-position="none" arrow="always" :interval="4000" height="240px">
            <el-carousel-item v-for="(item,index) in adLoop" :key="index">
                <a :href="item.coupon_share_url" target="_blank">
                    <el-image :src="item.pict_url + '_310x310xzq90.jpg_.webp'" style="object-fit: cover"></el-image>
                </a>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import {listTaobaoAdLoop} from "assets/api/taobao-ad-api";

export default {
    name: "TaobaoLoop",
    data() {
        return {
            loading: false,
            adLoop: []
        }
    },
    methods: {
        listTaobaoLoops() {
            this.loading = true;
            listTaobaoAdLoop(5).then((result) => {
                if (result.code === 10000) {
                    this.adLoop = result.data.tbk_dg_optimus_material_response.result_list.map_data;
                } else {
                    console.log(result);
                    this.$message.error(result.message);
                }
            });

            this.loading = false;
        }
    },
    mounted() {
        this.listTaobaoLoops();
    }
}
</script>

<style scoped>

</style>